/* eslint-disable react-hooks/rules-of-hooks */
/* eslint-disable react/jsx-pascal-case */
import React from "react"
import { areaList } from '@vant/area-data'
import cookie from 'react-cookies'
const leaseAdd = () => {
    let navigate = React.$router.useNavigate();
    const [form] = React.$Vant.Form.useForm()
    const [isShow, setisShow] = React.useState(false)
    const [LoginUser, setLoginUser] = React.useState(React.$LoginUser ? React.$LoginUser : {})
    const [product, setProduct] = React.useState(cookie.load('product') ? cookie.load('product') : {})
    const [region, setRegion] = React.useState(LoginUser.region ? LoginUser.region : '')

    const [code, setCode] = React.useState(
        [LoginUser.province, LoginUser.city, LoginUser.district]
    )

    // 日期
    const [DateShow, SetDateShow] = React.useState(false)
    // 天数，10天
    const [day, SetDay] = React.useState(10)

    //10天后的日期
    const [end, SetEnd] = React.useState(new Date(new Date().getTime() + 10 * 24 * 60 * 60 * 1000))

    const [endtime, SetEndTime] = React.useState(`${end.getFullYear()}/${end.getMonth() + 1}/${end.getDate()}`)


    //不含押金
    const [price, SetPrice] = React.useState(0)

    // 含押金
    const [rent, SetRent] = React.useState(0)

    // 图片
    const [card, setCard] = React.useState([])

    // 更改收货地址
    const onConfirmAre = (val, item) => {
        setisShow(false)
        setCode(val)
        let [province, city, district] = item
        let regions = '';
        if (province) {
            regions = province.text + '-'
            LoginUser.province = province.value
        }

        if (city) {
            regions += city.text + '-'
            LoginUser.city = city.value
        }

        if (district) {
            regions += district.text
            LoginUser.district = district.value
        }
        setRegion(regions);
        LoginUser.region = regions
    }

    // 表单提交
    const onFinish = async(values) => {
        console.log(values)
        let data = {
            busid: LoginUser.id,
            proid: product.id,
            rent: product.rent,
            price: rent,
            endtime: endtime,
            address: values.address,
            province: LoginUser.province,
            city: LoginUser.city,
            district: LoginUser.district,
            day: day
        }

        //判断有头像数据，在去更新
        if (values.card.length > 0 && values.card[0].file) {
            data.card = values.card[0].file
        }

        let result = await React.$api.leaseadd(data)
        if(result && result.code == 1){
             React.$Vant.Toast.success({
                 message: result.msg,
                 onClose: () => {
                     navigate('/business/lease/index')
                 }
             })
        } else {
            React.$Vant.Toast.fail({
                message: result.msg
            })
        }

    }

    // 选择商品
    const SelectProduct = () => {
        navigate('/business/product/index?action=add')
    }

    React.useEffect(() => {
        Total()
    }, [])

    // 初始化
    const Total = () => {
        const product = cookie.load('product') ? cookie.load('product') : {}
        console.log(product)
        // 日租金
        var price = product.rent_price ? product.rent_price : 0;

        // 押金
        var rent = product.rent ? product.rent : 0

        // 不含有押金
        var prices = parseFloat(price * day).toFixed(2);
        SetPrice(prices)

        // 含押金
        var rents = (parseFloat(prices) + parseFloat(rent)).toFixed(2)
        SetRent(rents)

    }
    // 确认日期
    const DateConfirm = (date) => {
        // 关闭日历
        SetDateShow(false)
        // 结束时间
        SetEndTime(`${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`)
        // 更改默认时间
        SetEnd(date)

        // 日租金
        var price = parseFloat(product.rent_price)

        // 押金
        var rent = parseFloat(product.rent)

        // 当前日期
        var now = new Date()

        //相差天数
        var time = date - now  // 时间戳
        var days = Math.ceil(time / (1000 * 60 * 60 * 24))
        SetDay(days)
        // 不含有押金
        var prices = parseFloat(price * days).toFixed(2);
        SetPrice(prices)
        // 含押金
        var rents = (parseFloat(prices) + rent).toFixed(2)
        SetRent(rents)

    }

    return (
        <>
            <React.$Vant.NavBar
                title="租赁"
                onClickLeft={() => navigate(-1)}
            />

            <div>
                <React.$Vant.Form
                    form={form}
                    onFinish={onFinish}
                >
                    <React.$Vant.Form.Item
                        rules={[{ required: true, message: '请选择租赁商品' }]}
                        label='租赁商品'
                        name="name"
                        onClick={SelectProduct}
                        initialValue={product.name ? product.name : ''}
                    >
                        <React.$Vant.Field placeholder='请输入租赁商品' isLink readonly />

                    </React.$Vant.Form.Item>

                    <React.$Vant.Form.Item
                        rules={[{ required: true, message: '请输入押金' }]}
                        label='押金'
                        name="rent"
                        initialValue={product.rent ? product.rent : ''}
                    >
                        <React.$Vant.Field placeholder='请输入押金' readonly value={product.rent ? product.rent : ''} />
                    </React.$Vant.Form.Item>
                    <React.$Vant.Form.Item
                        rules={[{ required: true, message: '请填写日供' }]}
                        label='日供'
                        name="rent_price"
                        initialValue={product.rent_price ? product.rent_price : ''}
                    >
                        <React.$Vant.Field readonly placeholder='请输入日供租金' value={product.rent_price ? product.rent_price : ''} />
                    </React.$Vant.Form.Item>
                    <React.$Vant.Form.Item
                        rules={[{ required: true, message: '请填写昵称' }]}
                        name='nickname'
                        label='昵称'
                        initialValue={LoginUser.nickname}
                    >
                        <React.$Vant.Input placeholder='请输入昵称' />
                    </React.$Vant.Form.Item>
                    <React.$Vant.Form.Item
                        rules={[{ required: true, message: '请输入手机号' }]}
                        name='mobile'
                        label='手机号码'
                        initialValue={LoginUser.mobile}
                    >
                        <React.$Vant.Input placeholder='请输入手机号' />
                    </React.$Vant.Form.Item>
                    <React.$Vant.Form.Item
                        isLink
                        label='地区'
                        onClick={() => setisShow(true)}
                    >
                        <React.$Vant.Field
                            readonly
                            value={region}
                            placeholder="请选择地区"
                        />
                    </React.$Vant.Form.Item>
                    <React.$Vant.Popup position='bottom' visible={isShow} onClose={() => setisShow(false)}>
                        <React.$Vant.Area
                            title='省市区'
                            value={code}
                            areaList={areaList}
                            onConfirm={onConfirmAre}
                            onCancel={() => setisShow(false)}
                        />
                    </React.$Vant.Popup>
                    <React.$Vant.Form.Item
                        rules={[{ required: true, message: '请输入详细地址' }]}
                        name='address'
                        label='详细地址'
                    >
                        <React.$Vant.Input placeholder='请输入详细地址' />
                    </React.$Vant.Form.Item>
                    <React.$Vant.Form.Item
                        label="租用时间"
                        onClick={() => { SetDateShow(true) }}
                    >
                        <React.$Vant.Field isLink readonly value={endtime} />
                    </React.$Vant.Form.Item>

                    <React.$Vant.Calendar
                        showConfirm={false}
                        visible={DateShow}
                        defaultDate={end}
                        onClose={() => { SetDateShow(false) }}
                        onConfirm={DateConfirm}
                    />
                    <React.$Vant.Form.Item
                        name='card'
                        label='上传证件'
                        rules={[
                            { required: true, message: '请上传证件图片' }
                        ]}
                    >
                        <React.$Vant.Uploader maxCount={1} name='card' value={card} />

                    </React.$Vant.Form.Item>
                    <div className="zy_goods_foot dis_flex">
                        <div className="left">
                            <div>{day}天<b>￥<em>{price}</em></b></div>
                            <div className="tou_d">含押金￥{rent}</div>
                        </div>
                        <p>
                            <React.$Vant.Button nativeType='submit' block size="normal" type="warning">
                                立即申请
                            </React.$Vant.Button>
                        </p>
                    </div>
                </React.$Vant.Form>
            </div>


        </>
    )
}

export default leaseAdd